import {
  MaterialTopTabBarProps,
  createMaterialTopTabNavigator,
} from '@react-navigation/material-top-tabs'
import { View, Text, Dimensions, Pressable } from 'react-native'
import useGetStatusBar from '../utils/useGetStatusBar'
import TabMenus, { TabMenusType } from '../component/tabMenus/tabMenus'
import { LinearGradient } from 'expo-linear-gradient'
import { useLayoutEffect, useMemo, useRef, useState } from 'react'
import SearchTxt from '../component/searchTxt'
import ChildGoodTab from '../pages/goodSearchTab/childGoodTab'
import RecommondTab from '../pages/goodSearchTab/recommondTab'
import SpecialTab from '../pages/goodSearchTab/specialTab'
import SelectGoodTab from '../pages/goodSearchTab/selectGoodTab'
import DiscountReductionTab from '../pages/goodSearchTab/discountReductionTab'
import { common } from '../assets/style/common'

function MyTabBar({ state, navigation }: MaterialTopTabBarProps) {
  const [activeIndex, setActiveIndex] = useState(state.index)
  const tabMenus = useRef<TabMenusType>(null)
  const tabList = useMemo(() => {
    const map: { [key: string]: string } = {
      RecommondTab: '今日推荐',
      ChildGoodTab: '儿童用品',
      SpecialTab: '限时特价',
      SelectGoodTab: '精选好物',
      DiscountReductionTab: '折扣满减',
    }
    return state.routeNames.map(item => map[item])
  }, [state.routeNames])
  useLayoutEffect(() => {
    if (state.index === activeIndex) return
    setActiveIndex(state.index)
    tabMenus && tabMenus.current?.changeByIndex(state.index)
  }, [state.index])
  const [barHeight] = useGetStatusBar()
  function goBack() {
    navigation.goBack()
  }
  function tabMenusChange(index: number) {
    if (index === activeIndex) return
    const route = state.routes[index]
    setActiveIndex(index)
    navigation.navigate(route.name, route.params)
  }
  return (
    <LinearGradient
      start={{ x: 0.2, y: 0.3 }}
      end={{ x: 0.8, y: 0.7 }}
      colors={['#73d7f7', '#57aef0']}
      style={{
        height: 78 + barHeight,
        paddingTop: barHeight,
      }}
    >
      <View
        style={[
          common.flexCol,
          {
            marginTop: 6,
            paddingHorizontal: 12,
            flexWrap: 'nowrap',
            marginBottom: 4,
          },
        ]}
      >
        <Pressable onPress={goBack} style={{ marginRight: 12 }}>
          <Text style={{ fontFamily: 'iconfont', color: '#fff', fontSize: 24 }}>
            &#xe601;
          </Text>
        </Pressable>
        <SearchTxt style={{ flex: 1 }} />
      </View>
      <TabMenus
        list={tabList}
        initActive={state.index}
        ref={tabMenus}
        onChange={tabMenusChange}
      />
    </LinearGradient>
  )
}

const SearchTab = createMaterialTopTabNavigator()

export default function GoodSearchTab({ route }: any) {
  const initialRouteName = route.params.key || 'RecommondTab'
  return (
    <SearchTab.Navigator
      initialRouteName={initialRouteName}
      initialLayout={{ width: Dimensions.get('window').width }}
      tabBar={MyTabBar}
      keyboardDismissMode="on-drag"
      backBehavior="none"
    >
      <SearchTab.Screen name="RecommondTab">{RecommondTab}</SearchTab.Screen>
      <SearchTab.Screen name="ChildGoodTab">{ChildGoodTab}</SearchTab.Screen>
      <SearchTab.Screen name="SpecialTab">{SpecialTab}</SearchTab.Screen>
      <SearchTab.Screen name="SelectGoodTab">{SelectGoodTab}</SearchTab.Screen>
      <SearchTab.Screen name="DiscountReductionTab">
        {DiscountReductionTab}
      </SearchTab.Screen>
    </SearchTab.Navigator>
  )
}
